<div class="body-container">
  <div class="annotations">
    <div class="annotation">
      <div class="legend">
        <div i18n="@@expt.overview.in-progress">In Progress</div>
        <div>{{ statusCount[exptStatusRecording] }}</div>
      </div>
      <div class="icon">
        <i class="status" nz-icon nzType="icons:icon-expt-ongoing"></i>
      </div>
    </div>
    <div class="annotation">
      <div class="legend">
        <div i18n="@@expt.overview.paused">Paused</div>
        <div>{{ statusCount[exptStatusPaused] }}</div>
      </div>
      <div class="icon">
        <i class="status" nz-icon nzType="icons:icon-expt-paused"></i>
      </div>
    </div>
    <div class="annotation">
      <div class="legend">
        <div i18n="@@expt.overview.not-started">Not Started</div>
        <div>{{ statusCount[exptStatusNotStarted] }}</div>
      </div>
      <div class="icon">
        <i class="status" nz-icon nzType="icons:icon-expt-not-started"></i>
      </div>
    </div>
  </div>

  <div class="table-content-area">
    <div class="table-search-area">
      <div class="search-inputs">
        <nz-input-group [nzPrefix]="prefixIconSearch">
          <input nz-input type="text" placeholder="Filter by feature flag name" i18n-placeholder="@@expt.overview.filter-by-ff-name" [(ngModel)]="filter.featureFlagName" (ngModelChange)="onSearch(true)">
        </nz-input-group>
        <ng-template #prefixIconSearch>
          <i nz-icon nzType="icons:icon-search"></i>
        </ng-template>
      </div>

      <button nz-button nzType="primary" (click)="onCreateClick()">
        <i nz-icon nzType="icons:icon-add"></i>
        <ng-container i18n="@@expt.overview.add-expt">Add</ng-container>
      </button>
    </div>
    <div class="table-wrapper">
      <nz-table #borderedTable
                nzSize="small"
                nzShowSizeChanger
                [nzData]="pagedExpt.items"
                [nzFrontPagination]="false"
                [nzLoading]="isLoading"
                [nzTotal]="pagedExpt.totalCount"
                [(nzPageSize)]="filter.pageSize"
                (nzPageSizeChange)="onSearch()"
                [nzPageSizeOptions]="[10,20,30]"
                [(nzPageIndex)]="filter.pageIndex"
                (nzPageIndexChange)="onSearch()"
                style="margin-top: 20px;">
        <thead>
        <tr>
          <th i18n="@@expt.overview.ff-name">Feature flag name</th>
          <th i18n="@@expt.overview.metric-name">Metric name</th>
          <th i18n="@@expt.overview.event-name">Event name</th>
          <th i18n="@@expt.overview.event-type">Event type</th>
          <th i18n="@@common.baseline-variation">Baseline</th>
          <th i18n="@@expt.overview.status">Status</th>
          <th nzAlign="center" i18n="@@common.actions">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of borderedTable.data">
          <td>{{data.featureFlagName}}</td>
          <td>{{data.metricName}}</td>
          <td>
            <ng-container *ngIf="data.metricEventType === customEventType">
              {{data.metricEventName}}
            </ng-container>
            <ng-container *ngIf="data.metricEventType === pageViewEventType">
              pageview
            </ng-container>
            <ng-container *ngIf="data.metricEventType === clickEventType">
              click
            </ng-container>
          </td>
          <td>
            <span class="tag">
              <ng-container *ngIf="data.metricEventType === customEventType">
                <ng-container i18n="@@common.custom">Custom</ng-container>:&nbsp;
                <ng-container *ngIf="data.metricCustomEventTrackOption === customEventTrackConversion" i18n="@@common.conversion-rate">Conversion rate</ng-container>
                <ng-container *ngIf="data.metricCustomEventTrackOption === customEventTrackNumeric" i18n="@@common.numeric">Numeric</ng-container>
              </ng-container>
              <ng-container *ngIf="data.metricEventType === pageViewEventType">
                PageView: <ng-container i18n="@@common.conversion-rate">Conversion rate</ng-container>
              </ng-container>
              <ng-container *ngIf="data.metricEventType === clickEventType">
                Click: <ng-container i18n="@@common.conversion-rate">Conversion rate</ng-container>
              </ng-container>
            </span>
          </td>
          <td>
            {{data.baselineVariation.value}}
          </td>
          <td class="expt-status-col">
            <div *ngIf="data.status === exptStatusRecording" class="expt-status ongoing"></div>
            <div *ngIf="data.status === exptStatusPaused" class="expt-status paused"></div>
            <div *ngIf="data.status === exptStatusNotStarted" class="expt-status not-started"></div>
            <div>
              {{data.status | T: data.status: 'expt-status'}}
            </div>
          </td>
          <td style="text-align: center">
            <a (click)="goToExperimentPage(data.featureFlagKey, data.id)" i18n="expt.overview.check-experiment">Check experiment</a>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<app-experiment-drawer [visible]="detailViewVisible" (close)="onDetailViewClosed($event)"></app-experiment-drawer>

